<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="UTF-8">
	<title>商品详情</title>
	<link type="text/css" rel="stylesheet" th:href="@{/dist/css/bootstrap.min.css}">
	<link rel="stylesheet" type="text/css"  th:href="@{/css/index.css}"/>
	<link rel="stylesheet" type="text/css"  th:href="@{/css/animate.css}"/>


</head>

<body>
<!--图像搜索模态框-->
<div class="modal fade" id="imageOcr" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" >
					图像搜索
				</h4>
			</div>
			<div class="modal-body">
				<!--图像搜索的form表单-->
				<form  class="form-horizontal" method="post" >
					<div class="form-group has-feedback">
						<label for="name" class="col-sm-2 control-label">上传图片</label>
						<div class="col-sm-5">
							<input type="file" class="form-control" accept="image/gif,image/jpeg,image/png,image/jpg" id="upload" >
							<!--<span class="glyphicon glyphicon-user form-control-feedback"></span>-->
						</div>
					</div>

					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<input type="button" class="btn btn-primary" data-dismiss="modal" value="识别图片" onclick="getTextByImage()">
					</div>
				</form>
				<!--form结束-->
			</div>
		</div>
		<!-- /.modal-content -->
	</div>
</div>
<!--图像搜索模态框结束-->
<!--导航部分  begin-->
<div class="container" style="margin-top: 5px;">
	<nav class="navbar navbar-default well-sm" style="padding-left: 0px;" role="navigation">
		<div class="container-fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse"
						data-target="#example-navbar-collapse">
					<span class="sr-only">切换导航</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" th:href="${#request.getContextPath()}+'/index'">商品管理系统</a>
			</div>
			<div class="collapse navbar-collapse" id="example-navbar-collapse">
				<ul class="nav navbar-nav pull-left">
					<li class="active">
						<a th:href="${#request.getContextPath()}+'/index'">首页</a>
					</li>

					<li>


					<li>
						<a href="#" data-toggle="modal" data-target="#insertCommodity">添加商品</a>
					</li>
					<li>
						<a th:href="${#request.getContextPath()}+'/userlist'" >管理用户</a>
					</li>
					<li>
						<a th:href="${#request.getContextPath()}+'/logout'" >退出登陆</a>
					</li>
				</ul>
				<form th:action="${#request.getContextPath()}+'/search'">
					<div class="input-group col-md-3 pull-right" style="positon:relative;padding: 7px;">

						<input id="search" name="searchwords" type="text" class="form-control" placeholder="请输入物品名"/>
						<span class="input-group-btn">
					            <button id="button" type="submit" class="btn btn-info btn-search" >
					            	<span class="glyphicon glyphicon-search"></span>
					            </button>
							</span>
						<span class="input-group-btn">
					            <button type="button" class="btn btn-info" data-toggle="modal"
										data-target="#imageOcr">
					            	<span class="glyphicon glyphicon-camera"></span>
					            </button>
                    </span>
					</div>
				</form>

			</div>
		</div>
	</nav>
</div>
<!--导航部分 end-->

<!--外层div-->
<div class="container">
	<div class="row">
		<!--左边-->
		<div class="col-md-8 col-sm-12">
			<ol class="breadcrumb">
				<li>
					<a href="#">商品详情</a>
				</li>
				<li>
					<a href="#" th:text="${commodity.name}"></a>
				</li>
			</ol>

			<div class="row">
				<div class="col-sm-12 col-md-6">
					<div class="thumbnail">
						<a><img th:src="${#request.getContextPath()}+${commodity.imageAddress}" style="height: 200px;" alt="通用的占位符缩略图"></a>
						<div class="caption">
							<h3 th:text="${commodity.name}"></h3>
							<p>
								<!--<div style="margin-bottom: 5px;width: 100px;">
                                    <a href="#" >更新商品</a>
                                    <input type="number" class="form-control" placeholder="购买数量" min="1" max="100" onclick="selectByCount(this)">
                                </div>-->
							<div style="clear: both;">
								<a href="#" class="btn btn-default" role="button" data-toggle="modal" data-target="#updateCommodity">
									更新商品
								</a>
							</div>

							</p>
						</div>
					</div>
				</div>

				<div class="col-sm-12 col-md-6">
					<div class="thumbnail">
						<ul class="list-group">
							<li class="list-group-item"><span class="text-success" th:text="'商品名称'+${commodity.name}"></span></li>
							<li class="list-group-item" th:text="${commodity.type}"><span class="text-info">类型:</span></li>
							<li class="list-group-item" th:text="${commodity.price}+'元'"><span class="text-info">价格:</span></li>
							<li class="list-group-item" th:text="${commodity.quantity}"><span class="text-info">数量:</span></li>
							<li class="list-group-item"><span class="text-info">说明:</span> 该功能正在改进中.............
							</li>
						</ul>
					</div>
				</div>
			</div>
			<!--<hr>-->

			<!--折叠部分end-->
		</div>

		<!--右边-->

		<div class="modal fade" id="insertCommodity"   aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h4 class="modal-title" id="myModalLabel3">
							添加商品
						</h4>
					</div>
					<div class="modal-body">
						<!--添加商品的form表单-->
						<form action="insert" class="form-horizontal" method="post" id="addCommodityForm" novalidate>
							<div class="form-group has-feedback">
								<label for="name" class="col-sm-2 control-label">上传图片</label>
								<div class="col-sm-5">
									<input type="file" class="form-control" accept="image/gif,image/jpeg,image/png,image/jpg" id="uploadCommodity" >
									<!--<span class="glyphicon glyphicon-user form-control-feedback"></span>-->
								</div>
							</div>
							<div class="form-group has-feedback">
								<label for="name" class="col-sm-2 control-label">商品名</label>
								<div class="col-sm-5">
									<input type="text" class="form-control" id="name" name="name">
									<span class="glyphicon glyphicon-user form-control-feedback"></span>
								</div>

							</div>
							<div class="form-group has-feedback">
								<label for="type" class="col-sm-2 control-label">类型</label>
								<div class="col-sm-5">
									<input type="text" class="form-control" id="type" name="type">
									<span class="glyphicon glyphicon-lock form-control-feedback"></span>
								</div>

							</div>
							<div class="form-group has-feedback">
								<label class="col-sm-2 control-label">价格</label>
								<div class="col-sm-5">
									<input type="text" class="form-control" id="price" name="price">
									<span class="glyphicon glyphicon-lock form-control-feedback"></span>
								</div>
							</div>

							<div class="form-group has-feedback">
								<label class="col-sm-2 control-label">数量</label>
								<div class="col-sm-5">
									<input type="text" class="form-control" id="quantity" name="quantity">
									<span class="glyphicon glyphicon-lock form-control-feedback"></span>
								</div>
							</div>

							<!--<input style="display:none;" type="text" class="form-control" id="imageStr" name="imageStr">
                            <input style="display:none;" type="text" class="form-control" id="imageName" name="imageName">-->

							<div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
								<input type="button" class="btn btn-primary" value="提交" onclick="addCommodity()">
							</div>
						</form>
						<!--form结束-->
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
		</div>




	<!-- 更新商品-->
	<div class="modal fade" id="updateCommodity" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						&times;
					</button>
					<h4 class="modal-title" id="myModalLabel3">
						更新商品
					</h4>
				</div>
				<div class="modal-body">
					<!--更新商品的form表单-->
					<form action="update" class="form-horizontal" method="post" id="updateCommodityForm">
						<div class="form-group has-feedback" style="margin-left: 5px;">
							<img th:src="${#request.getContextPath()}+${commodity.getImageAddress()}" style="height: 100px;" alt="通用的占位符缩略图">
						</div>
						<div class="form-group has-feedback">
							<label for="name" class="col-sm-2 control-label">上传图片</label>
							<div class="col-sm-5">
								<input type="file" class="form-control"  style="text-decoration-color: #5bc0de" accept="image/gif,image/jpeg,image/png,image/jpg" id="uploadCommodity2">
							</div>
						</div>

						<div class="form-group has-feedback">
							<label for="name" class="col-sm-2 control-label">商品名</label>
							<div class="col-sm-5">
								<input type="text" class="form-control" id="name" name="name" th:value="${commodity.name}">
								<span class="glyphicon glyphicon-user form-control-feedback"></span>
							</div>

						</div>
						<div class="form-group has-feedback">
							<label for="type" class="col-sm-2 control-label">类型</label>
							<div class="col-sm-5">
								<input type="text" class="form-control" id="type" name="type" th:value="${commodity.type}">
								<span class="glyphicon glyphicon-lock form-control-feedback"></span>
							</div>

						</div>
						<div class="form-group has-feedback">
							<label class="col-sm-2 control-label">价格</label>
							<div class="col-sm-5">
								<input type="number" class="form-control" id="price" name="price" th:value="${commodity.price}">
								<span class="glyphicon glyphicon-lock form-control-feedback"></span>
							</div>
						</div>

						<div class="form-group has-feedback">
							<label class="col-sm-2 control-label">数量</label>
							<div class="col-sm-5">
								<input type="number" class="form-control" id="quantity" name="quantity" th:value="${commodity.quantity}" onclick="selectByCount(this)">

							</div>
						</div>

						<input style="display:none;" type="number" class="form-control" id="commodityId" name="number" th:value="${commodity.number}">


						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
							<input type="button" class="btn btn-primary" value="提交" onclick="updateCommodity()">
						</div>
					</form>
					<!--form结束-->
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
	</div>
	</div>
	<!--添加商品模态框结束-->
</div>
<input name="rootUrl" id="rootUrl"  style="display:none;" th:value="${#request.contextPath}"/>

<script th:src="@{/dist/js/jquery.min.js}"></script>
<script th:src="@{/js/carousel.js}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{/dist/js/bootstrap.min.js}"></script>
<script th:src="@{/js/wow.js}"></script>
<script th:src="@{/js/indexScript.js}"></script>
<script th:src="@{/js/detailsScript.js}"></script>

<script>
	var contextPath =$("#rootUrl").val();
	/**
	 * 异步加载首页数据页
	 */

</script>

</body>
</html>